<template>
	<view>
		<view class="top">
			<u-search shape="round" placeholder="输入关键词进行搜索" :show-action="false"></u-search>
		</view>
		<view class="data-title">
			<view class="leftIcon"></view>
			分销数据汇总
		</view>
		<view class="data-item">
			<view class="title">
				<text>编码：S0000000P03N</text><text>当前分销：艳艳</text>
			</view>
			<view class="cons">
			
					<ul>
						<li>
							<view class="titles">
								总单数:9
							</view>
						</li>
						
						<li>
							<view class="titles">
								推广单量:9
							</view>
						</li>
				
						<li>
							<view class="titles">
								销售金额:739元
							</view>
						</li>
						<li>
							<view class="titles">
								有效金额:739元
							</view>
						</li>
						<li>
							<view class="titles">
								上交金额:1006元
							</view>
						</li>
						<li>
							<view class="titles">
								差价:739元
							</view>
						</li>
					</ul>
				
			</view>
		</view>
		<view class="data-title">
			<view class="leftIcon"></view>
			分销对账单
		</view>
		
		<view class="data-item">
		
			<view class="cons2">
			
					<ul>
						<li>
							<view class="titles">
								艳艳
							</view>
						</li>
						
						<li>
							<view class="titles">
								155****9595I店
							</view>
						</li>
				
						<li>
							<view class="titles">
								9
							</view>
						</li>
						<li>
							<view class="titles">
								608
							</view>
						</li>
						<li>
							<view class="titles">
								柚子
							</view>
						</li>
						<li>
							<view class="titles">
								155****9595I分
							</view>
						</li>
						<li>
							<view class="titles">
								8
							</view>
						</li>
						<li>
							<view class="titles">
								138
							</view>
						</li>
						
						<li>
							<view class="titles">
								柚子
							</view>
						</li>
						<li>
							<view class="titles">
								155****9595I分
							</view>
						</li>
						<li>
							<view class="titles">
								8
							</view>
						</li>
						<li>
							<view class="titles">
								138
							</view>
						</li>
					</ul>
				
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {

		}
	}
</script>

<style lang="scss">
	.top {
		width: 682rpx;
		height: 70rpx;
		margin: 0 auto;
		margin-top: 20rpx;
	}

	.data-title{
		width: 682rpx;
		height: auto;
		margin: 0 auto;
		font-size: 32rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #333333;
		line-height: 42rpx;
		text-align: left;
		display: flex;
		padding-top: 20rpx;

		.leftIcon{
			width: 6rpx;
			height: 32rpx;
			background: #FF3B06;
			border-radius: 3rpx 3rpx 3rpx 3rpx;
			display: inline-block;
			margin: 6rpx 10rpx 5rpx 10rpx;
		}

	}
	.data-item{
		width: 682rpx;
		height: 210rpx;
		background-color:#F9F9F9;
		border-radius:16rpx;
		margin: 0 auto;
		margin-top: 20rpx;
		.title{
			width: 100%;
			height:77rpx;
			border-bottom:1rpx solid #E9E9E9;
			font-size: 26rpx;
			font-family: PingFang SC-Bold, PingFang SC;
			font-weight: bold;
			color: #333333;
			text{
				line-height: 77rpx;
				margin-right:14rpx;
				margin-left: 20rpx;
			}
		}
		.cons{
			width: auto;
			height: auto;
			margin: 0 auto;
			float: none;
			overflow: hidden;
			color: #333333;
			padding: 0 20rpx;
			
			ul {
				display: flex;
				flex-wrap: wrap;
			}
			
			li {
				list-style: none;
				flex: 1 0 33%;
				width: 140rpx;
				height: auto;
				text-align: left;
				margin: 0 auto;
		
			
				.titles {
					font-size: 24rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 500;
					color: #333333;
					line-height:34rpx;
					text-align: left;
					margin-top: 20rpx;
				}
			}
		}
		.cons2{
			width: auto;
			height: auto;
			margin: 0 auto;
			float: none;
			overflow: hidden;
			color: #333333;
			
			
			ul {
				display: flex;
				flex-wrap: wrap;
			}
			
			li {
				list-style: none;
				flex: 1 0 20%;
				height: auto;
				text-align: center;
				margin: 0 auto;
		
			
				.titles {
					font-size: 24rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 500;
					color: #333333;
					line-height:34rpx;
					text-align:center;
					margin-top: 20rpx;
				}
			}
			li:nth-child(2n){
				list-style: none;
				flex: 1 0 30%;
				height: auto;
				text-align: center;
				margin: 0 auto;
						
							
				.titles {
					font-size: 24rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 500;
					color: #333333;
					line-height:34rpx;
					text-align:center;
					margin-top: 20rpx;
				}
			}
		
		}
	}
</style>